﻿
<div class="bui-page">
	<header class="bui-bar">
		<div class="bui-bar-left">
			<a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
		</div>
		<div class="bui-bar-main">多图切换控制</div>
		<div class="bui-bar-right">
		</div>
	</header>
	<main>
		<div id="uiSlidePic" class="bui-slide">
			<div class="bui-slide-main">
				<ul>
                    <li>
                        <div style="background: #F1F1F1;width:100%;height: 100%;"></div>
                        <div class="bui-slide-title">我是图片标题1</div>
                    </li>
                    <li>
                        <div style="background: #e8e8e8;width:100%;height: 100%;"></div>
                        <div class="bui-slide-title">我是图片标题2</div>
                    </li>
                    <li>
                        <div style="background: #f1f1f1;width:100%;height: 100%;"></div>
                        <div class="bui-slide-title">我是图片标题3</div>
                    </li>
				</ul>
			</div>
			<div class="bui-slide-head">
			</div>
		</div>
        <div class="container-xy">
            小提示: 该例子可以在手机中拖动
        </div>	
		<div class="bui-fluid-space">
			<div class="span6">
				<div id="prev" class="bui-btn">上一页</div>
			</div>
			<div class="span6">
				<div id="next" class="bui-btn">下一页</div>
			</div>
		</div>
		<div class="bui-panel">
			<div class="bui-panel-head">示例:</div>
			<div class="bui-panel-main">
				<div class="container">
					<h4>html:</h4>
						
					<xmp>
<div id="uiSlidePic" class="bui-slide">
  <div class="bui-slide-main">
    <ul>
      <li><div style="background: yellow;width:100%;height: 100%;"></div></li>
      <li><div style="background: orange;width:100%;height: 100%;"></div></li>
    </ul>
  </div>
  <div class="bui-slide-head"></div>
</div>				
					</xmp>	
					<h4>js:</h4>
					<xmp>
var uiSlidePic = bui.slide({
    id:"#uiSlidePic",
    height:200,
    visibleNum: 2,
    autopage: true
})
			 		</xmp>
					
				</div>
			</div>
		</div>
	</main>
</div>
